<template>
  <div class="homePage">
    <top-operation :showSreach="showSreach" :canSreach="canSreach"></top-operation>
    <base-scroll class="baseModel">
      <el-form ref="preclseForm" :model="sizeForm" label-width="40px" class="preclseForm">
        <el-form-item label="面积" class="item-padding">
          <el-col :span="11">
            <el-input v-model="sizeForm.FAreaBegin"></el-input>
          </el-col>
          <el-col :span="2" class="line" >-</el-col>
          <el-col :span="11">
            <el-input v-model="sizeForm.FAreaEnd"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="总价" class="item-padding">
          <el-col :span="11">
            <el-input v-model="sizeForm.FPriceBegin"></el-input>
          </el-col>
          <el-col :span="2" class="line">-</el-col>
          <el-col :span="11">
            <el-input v-model="sizeForm.FPriceEnd"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="line" label-width="0px">
          <el-button type="primary" size="medium" plain @click="submitForm('preclseForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </base-scroll>
  </div>
</template>

<script>
import topOperation from '@/common/topOperation/topTitle.vue'
import baseScroll from '@/common/scroller/baseScroll.vue'

export default {
  components: {
    baseScroll,
    topOperation
  },
  data() {
    return {
      showSreach: true,
      canSreach: true,
      sizeForm: {
        strWhere: '',
        FAreaBegin: '',
        FAreaEnd: '',
        FPriceBegin: '',
        FPriceEnd: ''
      }
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.sizeForm.strWhere = this.$store.state.sreachval
      this.$axios.post('/api/ChatRoom/SearchLogList', this.sizeForm)
        .then((response) => {
          const res = response.data
          if (res.code == 1) {
            this.$router.push({ path: '/infoResult', query: this.sizeForm }) // //类似get传参，通过URL传递参
          } else {
            this.$message.error('搜索失败')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.line {
  text-align: center;
}
.preclseForm {
  margin: 0.5rem;
}
.preclseForm .item-padding {
  padding-bottom: 0.3rem;
}
.fullwidth {
  width: 100%;
}
.halfwidth {
  display: inline-block;
  width: 50%;
  float: left;
}
</style>
<style>
.el-form-item {
  margin-bottom: 0.5rem;
}
</style>
